// Badge 徽章

.badge {
	padding: 0;
	margin: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	font-size: .8rem;
	font-weight: e-get($e-font-size, weight);

	// 字体样式
	&.badge--bold {
		font-weight: 500;
	}

	&.badge--bolder {
		font-weight: 600;
	}

	&.badge--boldest {
		font-weight: 700;
	}

	// 尺寸
	&.badge--md {
		height: 24px;
		width: 24px;
		font-size: 1rem;
	}

	&.badge--lg {
		height: 35px;
		width: 35px;
		font-size: 1rem;
	}

	&.badge--xl {
		height: 50px;
		width: 50px;
		font-size: 1.1rem;
		font-weight: 500;
	}

	&.badge--xxl {
		height: 90px;
		width: 90px;
		font-size: 2.2rem;
		font-weight: 500;
	}

	// 图片
	&.badge-pics {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;

		.badge-pic {
			border-radius: 50%;
			width: 2.5rem;
			height: 2.5rem;
			overflow: hidden;
			margin-left: -.7rem;
			border: 1px solid #fff;
			background-color: #f0f3ff;
			color: #a1a8c3;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			font-weight: 500;
			position: relative;

			img {
				width: 100%;
			}

			&.badge-pic--last {
				font-size: 1rem;
				font-weight: 500;
			}
		}
	}

	// 状态色
	@each $name, $color in $e-state-colors {
		&.badge-#{$name} {
			color: e-get($color, inverse);
			background: e-get($color, base);
		}

		&.badge--outline.badge-#{$name} {
			background: transparent;
			color: e-get($color, base);
			border: 1px solid e-get($color, base);

			&.badge--outline-2x {
				border: 2px solid e-get($color, base);
			}
		}

		&.badge--unified-#{$name} {
			color: e-get($color, base);
			background: rgba(e-get($color, base), .1);
		}
	}

	// 内联模式
	&.badge--inline {
		height: 0;
		width: auto;
		padding: .75rem .75rem;

		// 尺寸
		&.badge--md {
			padding: .8rem .6rem;
		}

		&.badge--lg {
			padding: .9rem .7rem;
		}

		&.badge--xl {
			padding: 1rem .8rem;
		}

		@include e-rounded {
			border-radius: $e-border-radius;
		}
	}

	// Pill mode
	&.badge--pill {
		border-radius: 2rem;
	}

	// 圆角
	&.badge--rounded {
		border-radius: $e-border-radius;
	}

	// 小圆点
	&.badge--dot {
		display: inline-block;
		line-height: 6px;
		min-height: 6px;
		min-width: 6px;
		height: 6px;
		width: 6px;
		font-size: 0;
		vertical-align: middle;
		text-align: center;

		&.badge--sm {
			line-height: 4px;
			min-height: 4px;
			min-width: 4px;
			height: 4px;
			width: 4px;
		}

		&.badge--lg {
			line-height: 8px;
			min-height: 8px;
			min-width: 8px;
			height: 8px;
			width: 8px;
		}

		&.badge--xl {
			line-height: 10px;
			min-height: 10px;
			min-width: 10px;
			height: 10px;
			width: 10px;
		}
	}

	// 方形
	&.badge--square {
		border-radius: 0;
	}

	// 悬浮效果
	&.badge--elevate {
		box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
	}
}